<template>
	<u-tabbar
		zIndex="999"
		:value="current"
		:fixed="true"
		:placeholder="false"
		:safeAreaInsetBottom="true"
		:border="false"
		inactive-color="#86909C"
		active-color="#1D2129"
		@change="changeTab"
	>
		<u-tabbar-item v-for="(tab, index) in tabLists" :key="index" :text="tab.text">
			<image slot="inactive-icon" :src="tab.icon" mode="aspectFit" style="width: 48rpx; height: 48rpx"></image>
			<image
				slot="active-icon"
				:src="tab.activeIcon"
				mode="aspectFit"
				style="width: 48rpx; height: 48rpx"
			></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
/**
 * 底部 switch tab
 */
export default {
	props: {
		current: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			show: false,
			tabLists: [
				{
					id: "0",
					text: "首页",
					icon: "../../static/tabbar/home.png",
					activeIcon: "../../static/tabbar/home-active.png",
					url: "/pages/home/index",
				},
				{
					id: "1",
					text: "订单",
					icon: "../../static/tabbar/order.png",
					activeIcon: "../../static/tabbar/order-active.png",
					url: "/pages/home/order",
				},
				{
					id: "2",
					text: "我的",
					icon: "../../static/tabbar/my.png",
					activeIcon: "../../static/tabbar/my-active.png",
					url: "/pages/home/my",
				},
			],
		}
	},
	computed: {},
	methods: {
		changeTab(value) {
			const url = this.tabLists[value].url
			uni.switchTab({
				url: url,
			})
		},
	},
	mounted() {},
}
</script>

<style scoped lang="scss"></style>
